<section class="my-8" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container flex flex-col items-center mx-auto mb-12 md:p-10 md:px-12">
		<h1 class="p-4 text-4xl font-semibold leading-none text-center">
			What our customers are saying about us
		</h1>
	</div>
	<div
		class="container flex flex-col items-center justify-center mx-auto lg:flex-row lg:flex-wrap lg:justify-evenly lg:px-10"
	>
		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12" [ngClass]="['bg' + contrast]">
				<p
					class="relative px-6 py-1 text-lg italic text-center"
					[ngClass]="['text' + defaultInv]"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z" />
						<path
							d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"
						/>
					</svg>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
					quibusdam, eligendi exercitationem molestias possimus facere.
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="absolute right-0 w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z" />
						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z" />
					</svg>
				</p>
			</div>
			<div
				class="flex flex-col items-center justify-center p-8 rounded-b-lg"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				<img
					class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full bg-gray-500"
					[ngClass]="['bg' + neutral]"
					src="https://source.unsplash.com/50x50/?portrait?1"
					alt=""
				/>
				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
				<p class="text-sm uppercase">Aliquam illum</p>
			</div>
		</div>
		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12" [ngClass]="['bg' + contrast]">
				<p
					class="relative px-6 py-1 text-lg italic text-center"
					[ngClass]="['text' + defaultInv]"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z" />
						<path
							d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"
						/>
					</svg>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
					quibusdam, eligendi exercitationem molestias possimus facere.
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="absolute right-0 w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z" />
						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z" />
					</svg>
				</p>
			</div>
			<div
				class="flex flex-col items-center justify-center p-8 rounded-b-lg"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				<img
					class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full bg-gray-500"
					[ngClass]="['bg' + neutral]"
					src="https://source.unsplash.com/50x50/?portrait?2"
					alt=""
				/>
				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
				<p class="text-sm uppercase">Aliquam illum</p>
			</div>
		</div>
		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12" [ngClass]="['bg' + contrast]">
				<p
					class="relative px-6 py-1 text-lg italic text-center"
					[ngClass]="['text' + defaultInv]"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z" />
						<path
							d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"
						/>
					</svg>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
					quibusdam, eligendi exercitationem molestias possimus facere.
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="absolute right-0 w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z" />
						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z" />
					</svg>
				</p>
			</div>
			<div
				class="flex flex-col items-center justify-center p-8 rounded-b-lg"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				<img
					class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full bg-gray-500"
					[ngClass]="['bg' + neutral]"
					src="https://source.unsplash.com/50x50/?portrait?3"
					alt=""
				/>
				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
				<p class="text-sm uppercase">Aliquam illum</p>
			</div>
		</div>
		<div class="flex flex-col max-w-sm mx-4 my-6 shadow-lg">
			<div class="px-4 py-12 rounded-t-lg sm:px-8 md:px-12" [ngClass]="['bg' + contrast]">
				<p
					class="relative px-6 py-1 text-lg italic text-center"
					[ngClass]="['text' + defaultInv]"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M232,246.857V16H16V416H54.4ZM48,48H200V233.143L48,377.905Z" />
						<path
							d="M280,416h38.4L496,246.857V16H280ZM312,48H464V233.143L312,377.905Z"
						/>
					</svg>
					Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus
					quibusdam, eligendi exercitationem molestias possimus facere.
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 512 512"
						class="absolute right-0 w-8 h-8"
						[ngClass]="['text' + primary]"
						fill="currentColor"
					>
						<path d="M280,185.143V416H496V16H457.6ZM464,384H312V198.857L464,54.1Z" />
						<path d="M232,16H193.6L16,185.143V416H232ZM200,384H48V198.857L200,54.1Z" />
					</svg>
				</p>
			</div>
			<div
				class="flex flex-col items-center justify-center p-8 rounded-b-lg"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				<img
					class="w-16 h-16 mb-2 -mt-16 bg-center bg-cover rounded-full bg-gray-500"
					[ngClass]="['bg' + neutral]"
					src="https://source.unsplash.com/50x50/?portrait?4"
					alt=""
				/>
				<p class="text-xl font-semibold leading-tight">Distinctio Animi</p>
				<p class="text-sm uppercase">Aliquam illum</p>
			</div>
		</div>
	</div>
</section>
